<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>除夕快乐烟花秀</title>
<style>
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: black;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background-image: url('https://example.com/night-sky.jpg');
        background-size: cover;
    }
    #message {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3em;
        color: white;
        opacity: 0;
        transition: opacity 2s, transform 2s, color 2s;
        animation: showMessage 5s ease-in-out forwards;
    }
    @keyframes showMessage {
        0% {
            transform: scale(0.5);
            color: yellow;
        }
        50% {
            color: red;
        }
        100% {
            transform: scale(1.5);
            color: white;
        }
    }
</style>
</head>
<body>
<audio autoplay loop>
    <source src="https://example.com/new-year-music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<div id="message">除夕快乐！</div>
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.min.js"></script>
<script>
    const container = document.body;
    const options = {
        maxRockets: 5,            // 最多同时存在的烟花数量，增加到5
        rocketSpawnInterval: 150, // 烟花发射间隔时间
        numParticles: 150,        // 每个烟花产生的粒子数，增加到150
        explosionMinHeight: 0.2,  // 爆炸最小高度比例
        explosionMaxHeight: 0.9,  // 爆炸最大高度比例
        explosionChance: 0.08     // 爆炸概率
    };

    const fireworks = new Fireworks(container, options);
    fireworks.start();

    // 在烟花开始后5秒显示消息
    setTimeout(() => {
        document.getElementById('message').style.opacity = 1;
    }, 5000);
</script>
</body>
</html> 